import { useMaterialDrop } from "../../hooks/useMaterialDrop"
import { CommonComponentProps } from "../../interface"

const Container = ({ id, name, children, styles }: CommonComponentProps) => {
  const { canDrop, drop } = useMaterialDrop(["Button", "Container"], id)

  return (
    <div
      ref={drop}
      data-component-id={id}
      className={`${
        canDrop ? "border-[2px] border-[blue]" : "border-[1px] border-[#000]"
      } min-h-[100px] p-[20px]`}
      style={styles}
    >
      {children}
    </div>
  )
}

export default Container
